<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:37:57
-->
<template>
  <div class="page-warp">
    <ItemWrap4 title="车辆运输货量排名" v-if="type != 'Center'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <TopLeft style="margin-top: 0px" :typePosition="''" @chartClick="chartClick0" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTopTitle + '发货客户'" v-if="type != 'Center'"
      style="width: 390px; height: 310px; margin: 10px auto 25px auto;">
      <TopRight style="margin-top: -10px" :typePosition="''" @chartClick="chartClick1" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '常跑线路'" :type="'leftrightBg3'"
      v-if="(type != 'Center' && type != 'LeftLeft' && type != 'RightRight') || type === 'LeftRight' || type === 'RightLeft'"
      style="width: 820px; height: 310px; margin: 10px auto 25px auto;"">
      <BottomRight style=" margin-top: -10px" :typePosition="''" @chartClick="chartClick2" />
    </ItemWrap4>


    <ItemWrap4 title="车辆运输货量排名" v-if="type === 'Center'"
      style="width: 600px; height: 310px; margin: 10px auto 25px auto;"">
      <BigTopLeft style=" margin-top: 0px" :typePosition="'centerLong'" @chartClick="chartClick0" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTopTitle + '发货客户'" v-if="type === 'Center'"
      style="width: 600px; height: 310px; margin: 10px auto 25px auto;"">
      <BigTopRight style=" margin-top: -10px" :typePosition="'centerLong'" @chartClick="chartClick1" />
    </ItemWrap4>
    <ItemWrap4 :title="mapTitle + '常跑线路'" :type="'leftrightBg3'" v-if="type === 'Center'"
      style="width: 1230px; height: 310px; margin: 10px auto 25px auto;"">
      <BigBottomRight :typePosition="'centerLong'" style=" margin-top: -10px" @chartClick="chartClick2" />
    </ItemWrap4>
  </div>
</template>

<script>
import TopLeft from './top-left.vue';
import TopRight from './top-right.vue';
import BottomRight from './bottom-right.vue';
import BigTopLeft from './big-top-left.vue';
import BigTopRight from './big-top-right.vue'
import BigBottomRight from './big-bottom.vue';

export default {
  name: 'ALeftRight',
  components: {
    TopLeft,
    TopRight,
    BottomRight,
    BigTopLeft,
    BigTopRight,
    BigBottomRight
  },
  props: {
    type: {
      type: String,
      default: 'LeftRight',
    }
  },
  data() {
    return {
      mapTitle: '鲁Q80K00',
      mapTopTitle: '鲁Q80K00'
    };
  },
  created() {
  },
  methods: {
    chartClick0(params) {
      // this.mapTitle = `${params.name}常跑线路`;
      this.chartClick('ALeftRightTopLeft', params);
    },
    chartClick1(params) {
      this.chartClick('ALeftRightTopCenter', params);
    },
    chartClick2(params) {
      // this.mapTopTitle = `${params.name}发货客户`;
      this.chartClick('ALeftRightTopRight', params);
    },
    chartClick(name, params) {
      this.$emit('chartClick', { name, type: this.type, options: params });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-warp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

  .page-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 722px;
  }
}
</style>
